<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Login Page with Video Background</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }

        #video-background {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -1000;
            object-fit: cover;
        }

        .login-container {
            position: relative;
            z-index: 1;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            width: 350px;
            height: 350px;
            top: -50px;
        }

        .login-container h2 {
            margin-bottom: 20px;
            font-family:宋体;
            color:#757575;
            font-size:50px;
            font-weight: bold;
        }

        .login-container input {
            width: 100%;
            height: 40px;
            padding: 10px;
            margin: 10px 0;
            background-color: transparent;
            border-radius: 5px;
            border: 2px solid #3c3f41; /* 将输入框边框颜色设为黑色 */

        }

         .login-container a {
            width: 80%;
            padding: 50px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            background-color: transparent;
            border-radius: 5px;
            color: #757575;
            margin: 5px;
             text-decoration: none;
             font-size:20px;
        }
    </style>
</head>

<body>
    <video id="video-background" autoplay muted loop>
        <source src="img/longin.mp4" type="video/mp4">
    </video>
    <div class="login-container" style="width:350px;height: 350px;margin:1px;padding: 1px;" >
        <h2>Login</h2>
        <form action="#">
            <input type="text" placeholder="Username" required><br>
            <input type="password" placeholder="Password" required><br>
            <a href="index.html" style="text-align: left;">Login</a>
            <a href="Register.html">Register</a>
        </form>
    </div>
</body>

</html>
